<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js"></script>
    <title>扫码登录</title>
</head>

<body>
    <!-- <img src=""
        alt=""> -->
    <img id="img" src="" alt="">
    <div id="info"></div>
    <script>
        axios.get("http://localhost:3000/qrcode/generate").then(res => {
            document.getElementById("img").src = res.data.img;
            // 开始轮询获取验证码状态
            queryStatus(res.data.qrcode_id);
        })

        function queryStatus(id) {
            axios.get(`http://localhost:3000/qrcode/check?id=${id}`).then(res => {
                const status = res.data.status;
                let content = "";
                switch (status) {
                    case 'noscan': content = "未扫码"; break;
                    case 'scan-await-confirm': content = "已扫码，等待确认"; break;
                    case 'scan-confirm': content = "已确认"; break;
                    case 'scan-cancel': content = "已取消"; break;
                }
                document.getElementById("info").textContent = content;
                if (status === "noscan" || status === "scan-await-confirm") {
                    setTimeout(() => queryStatus(id), 1000);
                }
            })
        }
    </script>
</body>

</html>